import { defineComponent, computed } from "vue";
import { iconProps, iconDataType } from "./iconTypes";
import Base64 from "./utils/base64.js";
import iconData from "./utils/iconData";
import { ifSpecialIcon, double } from "./utils/utils";

/** 生成src */
const generateUrl = (rawData: string) => {
  if (!rawData) return; // type 不存在
  const base64 = Base64.encode(rawData);
  const src = "data:image/svg+xml;base64," + base64;
  return src;
};

/** 版本兼容 */
const getFixedIconType = function (type: string) {
  // 兼容旧版本 typo
  return type === "field" ? "filled" : type;
};

export default defineComponent({
  name: "MyIcon",
  props: iconProps(),
  setup(props) {
    const styles = computed(() => {
      const { color, size, icon, type } = props;
      const src = generateUrl(
        (iconData as iconDataType)[icon][getFixedIconType(type)]
      );

      // 由于箭头大小不一致，所以重新计算大小
      const height = ifSpecialIcon(icon) ? double(size) : size;

      return {
        background: color,
        width: size + "px",
        height: height + "px",
        maskImage: `url(${src})`,
        display: "inline-block",
      };
    });

    return () => <div style={styles.value}></div>;
  },
});
